<page-header-wrapper [title]="'品牌：' + goodsItem?.brand" [logo]="phLogo" [action]="phAction" [phContent]="phNgContent">
    <ng-template #phLogo class>
        <img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
    </ng-template>
    <ng-template #phAction>
        <button (click)="goToPage()" nz-button [nzType]="'primary'">返回</button>
    </ng-template>
    <ng-template #phNgContent>
        <sv-container size="small" col="2">
            <sv label="名称">{{goodsItem?.name}}</sv>
            <sv label="是否上架">{{goodsItem?.isShelves}}</sv>
            <sv label="产品规格">{{goodsItem?.text}}</sv>
            <sv label="最低价格">{{goodsItem?.minPrice}}</sv>
            <sv label="厂家推荐价">{{goodsItem?.retailPrice}}</sv>
        </sv-container>
    </ng-template>

    <nz-card [nzBordered]="false" nzTitle="商品型号" class="mb-lg">

        <!-- serch begin -->
        <form nz-form [nzLayout]="'inline'" (ngSubmit)="serchData()" class="search__form">
            <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
                <div nz-col nzMd="8" nzSm="24">
                    <nz-form-item>
                        <nz-form-label nzFor="name">商品型号</nz-form-label>
                        <nz-form-control>
                            <input nz-input [(ngModel)]="query.condition.name" name="name" placeholder="请输入" id="name">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzMd="8" nzSm="24" *ngIf="expandForm">
                    <nz-form-item>
                        <nz-form-label nzFor="isShelves">是否上架</nz-form-label>
                        <nz-form-control>
                            <input nz-input [(ngModel)]="query.condition.isShelves" name="isShelves" placeholder="请输入"
                                id="isShelves">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="expandForm ? 24 : 8" [class.text-right]="expandForm">
                    <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
                    <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>
                    <a (click)="expandForm = !expandForm">
                        {{ expandForm ? '收起' : '展开' }}
                        <i nz-icon [nzType]="expandForm ? 'up' : 'down'"></i>
                    </a>
                </div>
            </div>
        </form>
        <!-- serch end -->

        <!-- button begin-->
        <button nz-button (click)="add()" [nzType]="'primary'">
            <i nz-icon nzType="plus"></i>
            <span>新建</span>
        </button>
        <button nz-button (click)="getData()" [nzType]="'primary'">
            <i nz-icon nzType="reload"></i>
            <span>刷新</span>
        </button>
        <!-- <ng-container *ngIf="selectedRows.length > 0">
            <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
                更多操作
                <i nz-icon nzType="down"></i>
            </button>
            <nz-dropdown-menu #batchMenu="nzDropdownMenu">
                <ul nz-menu>
                    <li nz-menu-item (click)="batchDeleteConfirm()">批量删除</li>
                </ul>
            </nz-dropdown-menu>
        </ng-container> -->
        <div class="my-md">
            <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
                <ng-template #message>
                    已选择
                    <strong class="text-primary">{{ selectedRows.length }}</strong>
                    项
                    <a *ngIf="selectedRows.length > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
                </ng-template>
            </nz-alert>
        </div>
        <!-- button end-->

        <st #st [columns]="columns" [data]="data" [pi]="query.pageNo" [ps]="query.pageSize" [page]="page.pageParam"
            [total]='page.total' [loading]="loading" (change)="stChange($event)" [expand]="expand">

            <!-- 可展开模板 begin -->
            <ng-template #expand let-item let-index="index" let-column="column">
                <!-- 图片 -->
                <div style="display: flex;padding:5px;flex-wrap: wrap;">
                    <div *ngFor="let itemImg of item?.fileList" style="padding-right: 10px;padding-bottom: 10px">
                        <img style="max-width: 105px;max-height: 105px;" [src]="showIcon(itemImg?.filePath)">
                        <div>
                            <a (click)="deletePhoto(itemImg)">删除照片</a>
                        </div>
                    </div>
                    <div style="position:relative" *ngIf="item?.fileList?.length === 0">
                        <button (click)="uploadFile(item)"
                            style="width: 105px;height: 105px;align-items: center;justify-content: center;display: flex;"
                            nz-button nzType="dashed">
                            <div><i nz-icon nzType="plus" class="upload-icon-zfy"></i></div>
                            <div class="ant-upload-text">图片上传</div>
                        </button>
                        <input #file type="file" multiple="multiple" (change)="fileSelect($event)" id="file"
                            style="display: none;" />
                    </div>
                </div>
            </ng-template>
        </st>
    </nz-card>


    <!-- model template begin-->
    <ng-template #modalContent>
        <form nz-form [formGroup]="form">
            <input nz-input formControlName="goodsId" hidden>
            <input nz-input formControlName="goodsDetailTypeId" hidden>
            <nz-row nzGutter="16">

                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="name">商品（型号）名称</nz-form-label>
                        <nz-form-control nzErrorTip="请输入商品（型号）名称">
                            <input nz-input formControlName="name" id="name" placeholder="请输入商品（型号）名称">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>


                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="isShelves">是否上架</nz-form-label>
                        <nz-form-control nzErrorTip="请输入是否上架">
                            <nz-select formControlName="isShelves" id="isShelves" nzAllowClear nzPlaceHolder="请输入是否上架">
                                <nz-option nzValue="是" nzLabel="是"></nz-option>
                                <nz-option nzValue="否" nzLabel="否"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row nzGutter="16">
                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="price">价格</nz-form-label>
                        <nz-form-control nzErrorTip="请输入价格">
                            <nz-input-number formControlName="price" id="price" [nzStep]="1" nzPlaceHolder="请输入价格">
                            </nz-input-number>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>

                <nz-col nzMd="12">
                    <nz-form-item>
                        <nz-form-label nzFor="num">商品数量</nz-form-label>
                        <nz-form-control nzErrorTip="请输入商品数量">

                            <nz-input-number formControlName="num" id="num" [nzStep]="1" nzPlaceHolder="请输入商品数量">
                            </nz-input-number>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
        </form>
    </ng-template>
    <!-- model template end-->

</page-header-wrapper>